﻿@using Microsoft.AspNetCore.Mvc.TagHelpers
@using ConsentTypes = OpenIddict.Abstractions.OpenIddictConstants.ConsentTypes
@using ClientTypes = OpenIddict.Abstractions.OpenIddictConstants.ClientTypes
@model ApplicationCreateViewModel
@{
	List<SelectListItem> consentTypes =
	[
		new SelectListItem(ConsentTypes.Explicit, ConsentTypes.Explicit),
		new SelectListItem(ConsentTypes.Implicit, ConsentTypes.Implicit),
		new SelectListItem(ConsentTypes.External, ConsentTypes.External),
		new SelectListItem(ConsentTypes.Systematic, ConsentTypes.Systematic)
	];
	List<SelectListItem> clientTypes =
	[
		new SelectListItem(ClientTypes.Confidential, ClientTypes.Confidential),
		new SelectListItem(ClientTypes.Public, ClientTypes.Public),
	];
}
<div class="p-4">
	<h3>应用创建</h3>
	<hr>
	<form class="layui-form" asp-controller="Manage" asp-action="ApplicationCreate" method="post">
		<div asp-validation-summary="All" class="text-danger"></div>
		@* <div class="mt-2"> *@
		@* 	<label>ClientId</label> *@
		@* 	<input type="text" asp-for="ClientId" class="form-control"> *@
		@* </div> *@
		@* <div class="mt-2"> *@
		@* 	<label>ClientSecret</label> *@
		@* 	<input type="text" asp-for="ClientSecret" class="form-control"> *@
		@* </div> *@
		<div class="mt-2">
			<label>ConsentType</label>
			<select asp-for="ConsentType" asp-items="consentTypes" class="form-control"></select>
		</div>
		<div class="mt-2">
			<label>DisplayName</label>
			<input type="text" asp-for="DisplayName" class="form-control">
		</div>
		<div class="mt-2">
			<label>ClientType</label>
			<select asp-for="ClientType" asp-items="clientTypes" class="form-control"></select>
		</div>
		<div id="redirectUris" class="mt-2">
			<label>
				RedirectUris
				<img src="~/images/icon_添加.svg" id="addRedirectUri" style="color: blue;cursor: pointer" alt="" />
			</label>
			@for (var i = 0; i < Model.RedirectUris.Length; i++)
			{
				<div class="redirect-uri-input d-flex mt-2">
					<input type="text" name="RedirectUris[@i]" value="@Model.RedirectUris[i]" class="form-control" placeholder="用户授权后，重定向的地址，例如: https://xxx.com/login/callback_xx" required/>
					<img src="~/images/icon_删除.svg" class="remove-redirect-uri px-3" style="cursor: pointer;" alt="" disabled="@(Model.RedirectUris.Length == 1)" />
				</div>
			}
		</div>
		<div id="postLogoutRedirectUris" class="mt-2">
			<label>
				PostLogoutRedirectUris
				<img src="~/images/icon_添加.svg" id="addPostLogoutRedirectUris" style="color: blue;cursor: pointer" alt=""/>
			</label>
			@for (var i = 0; i < Model.PostLogoutRedirectUris.Length; i++)
			{
				<div class="postLogout-redirect-uri-input d-flex mt-2">
					<input type="text" name="PostLogoutRedirectUris[@i]" value="@Model.PostLogoutRedirectUris[i]" class="form-control" placeholder="用户登出后，重定向的地址，例如: https://xxx.com/logout/callback_xx" required/>
					<img src="~/images/icon_删除.svg" class="remove-postLogout-redirect-uri px-3" style="cursor: pointer;" alt="" disabled="@(Model.PostLogoutRedirectUris.Length == 1)" />
				</div>
			}
		</div>
		<div class="mt-2">
			<label>AllowScopes</label>
			<input type="text" asp-for="AllowScopes" placeholder="逗号分隔的权限，例如: profile,email" class="form-control">
		</div>
		<div class="mt-2">
			<label>RequirePkce</label>
			<input asp-for="RequirePkce" type="checkbox" lay-skin="switch">
		</div>
		<div class="mt-2">
			<button type="submit" class="btn btn-primary">创建</button>
		</div>
	</form>
</div>

@section Scripts {
	<script>
		"use strict";
		function addInputField(containerId, inputClass, addButtonId, inputNamePrefix,placeholder) {
			const container = $(`#${containerId}`);
			const index = container.find(`.${inputClass}`).length;
			const inputHtml = `
	        <div class="${inputClass} d-flex mt-2">
	            <input type="text" name="${inputNamePrefix}[${index}]" class="form-control" placeholder="${placeholder}" required/>
	            <img src="/images/icon_删除.svg" class="remove-${inputClass} px-3" style="cursor: pointer;" alt="" />
	        </div>`;
			container.append(inputHtml);

			// 检查是否只有一个输入框，如果是，则禁用删除按钮
			updateRemoveButtonState(container, inputClass);
		}

		function removeInputField(containerId, inputClass) {
			$(document).on('click', `.remove-${inputClass}`, function () {
				const $inputContainer = $(this).closest(`.${inputClass}`);
				$inputContainer.remove();

				// 重新排序输入框的索引
				const container = $(`#${containerId}`);
				container.find(`.${inputClass}`).each(function (index) {
					const $input = $(this).find(`input[name^="${inputNamePrefix}"]`);
					$input.attr('name', `${inputNamePrefix}[${index}]`);
				});

				// 检查是否只有一个输入框，如果是，则禁用删除按钮
				updateRemoveButtonState(container, inputClass);
			});
		}

		function updateRemoveButtonState(container, inputClass) {
			if (container.find(`.${inputClass}`).length <= 1) {
				container.find(`.remove-${inputClass}`).prop('disabled', true);
			} else {
				container.find(`.remove-${inputClass}`).prop('disabled', false);
			}
		}

		$(document).ready(function () {
			// 添加 Redirect URI 输入框
			$('#addRedirectUri').click(function () {
				addInputField('redirectUris', 'redirect-uri-input', 'addRedirectUri', 'RedirectUris','用户授权后，重定向的地址，例如: https://xxx.com/login/callback_xx');
			});

			// 删除 Redirect URI 输入框
			removeInputField('redirectUris', 'redirect-uri-input');

			// 添加 Post Logout Redirect URI 输入框
			$('#addPostLogoutRedirectUris').click(function () {
				addInputField('postLogoutRedirectUris', 'postLogout-redirect-uri-input', 'addPostLogoutRedirectUris', 'PostLogoutRedirectUris','用户登出后，重定向的地址，例如: https://xxx.com/logout/callback_xx');
			});

			// 删除 Post Logout Redirect URI 输入框
			removeInputField('postLogoutRedirectUris', 'postLogout-redirect-uri-input');

			// 初始状态
			updateRemoveButtonState($('#redirectUris'), 'redirect-uri-input');
			updateRemoveButtonState($('#postLogoutRedirectUris'), 'postLogout-redirect-uri-input');
		});
	</script>
}
